{% load i18n %}

<script src="{{ STATIC_URL }}js/jquery.selection.js"></script>
<script src="{{ STATIC_URL }}js/bootcamp.markdown.js"></script>

<div class="markdown">
  <div class="modal fade" id="markdown_insert_link">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title">{% trans 'Insert Link' %}</h4>
        </div>
        <div class="modal-body">
          <div class="form-group">
            <label for="markdown_link_text" class="control-label">{% trans 'Link Text' %}</label>
            <input type="text" class="form-control" id="markdown_link_text" placeholder="Link Text">
          </div>
          <div class="form-group">
            <label for="markdown_url" class="control-label">{% trans 'URL' %}</label>
            <input type="text" class="form-control" id="markdown_url" placeholder="URL">
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary add_link" data-dismiss="modal">{% trans 'Ok' %}</button>
          <button type="button" class="btn btn-default" data-dismiss="modal">{% trans 'Close'%}</button>
        </div>
      </div>
    </div>
  </div>
  <div class="modal fade" id="markdown_insert_picture">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title">{% trans 'Insert Image' %}</h4>
        </div>
        <div class="modal-body">
          <div class="form-group">
            <label for="markdown_picture_url" class="control-label">{% trans 'Picture URL' %}</label>
            <input type="text" class="form-control" id="markdown_picture_url" placeholder="Picture URL">
          </div>
          <div class="form-group">
            <label for="markdown_alt_text" class="control-label">{% trans 'Alt Text' %}</label>
            <input type="text" class="form-control" id="markdown_alt_text" placeholder="Alt Text">
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary add_picture" data-dismiss="modal">{% trans 'Ok' %}</button>
          <button type="button" class="btn btn-default" data-dismiss="modal">{% trans 'Close' %}</button>
        </div>
      </div>
    </div>
  </div>
  <div class="modal fade" id="markdown_help">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title">{% trans 'Help' %}</h4>
        </div>
        <div class="modal-body">
          <p>{% trans 'You can learn more about markdown syntax' %} <a href="http://daringfireball.net/projects/markdown/syntax" target="_blank">{% trans 'here' %}</a>.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">{% trans 'Close' %}</button>
        </div>
      </div>
    </div>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-default btn-sm" ref="header"><span class="glyphicon glyphicon-header"></span></button>
    <button type="button" class="btn btn-default btn-sm" ref="bold"><span class="glyphicon glyphicon-bold"></span></button>
    <button type="button" class="btn btn-default btn-sm" ref="italic"><span class="glyphicon glyphicon-italic"></span></button>
    <button type="button" class="btn btn-default btn-sm" ref="list"><span class="glyphicon glyphicon-list"></span></button>
    <button type="button" class="btn btn-default btn-sm" ref="link"><span class="glyphicon glyphicon-link"></span></button>
    <button type="button" class="btn btn-default btn-sm" ref="picture"><span class="glyphicon glyphicon-picture"></span></button>
    <button type="button" class="btn btn-default btn-sm" ref="indent-left"><span class="glyphicon glyphicon-indent-left"></span></button>
    <button type="button" class="btn btn-default btn-sm" ref="indent-right"><span class="glyphicon glyphicon-indent-right"></span></button>
  </div>
  <button type="button" data-toggle="modal" data-target="#markdown_help" class="btn btn-link btn-sm pull-right"><span class="glyphicon glyphicon-question-sign"></span> Help</button>
</div>
<script>$(function(){$("#{{ textarea }}").markdown();});</script>